<template>
  <el-menu class="nav-bar" background-color="#ededed" >
    <router-link to="/discovery">
      <el-menu-item :class="{active:tag=='1'}" @click="tag='1'">
        <i class="iconfont icon-yinlemusic214"></i>
        <span slot="title">发现音乐</span>
      </el-menu-item>
    </router-link>
    <router-link to="/recommend">
      <el-menu-item :class="{active:tag=='2'}" @click="tag='2'">
        <i class="iconfont icon-icon-"></i>
        <span slot="title">推荐歌单</span>
      </el-menu-item>
    </router-link>
    <router-link to="/latestmusic">
      <el-menu-item :class="{active:tag=='3'}" @click="tag='3'">
        <i class="iconfont icon-yooxi"></i>
        <span slot="title">最新音乐</span>
      </el-menu-item>
    </router-link>
    <router-link to="/lastestmv">
      <el-menu-item :class="{active:tag=='4'}" @click="tag='4'">
        <i class="iconfont icon-shipin"></i>
        <span slot="title">最新MV</span>
      </el-menu-item>
    </router-link>
  </el-menu>
</template>

<script>
export default {
  name: "navbar",
  data() {
    return {
      tag: "1",
    };
  },
};
</script>

<style lang="scss">
</style>